<template>
    <div class="homes-wrapper">
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="6000" indicator-color="white">
                <van-swipe-item v-for="v in swipeImgArr" :key="v.id"><img :src="v.imgSrc"  /></van-swipe-item>
            </van-swipe>
            <div class="searchBar">
                <van-search
                    v-model="searchVal"
                    show-action
                    placeholder="请输入小区或地址"
                    background="none"
                    @search="onSearch"
                    >
                    <template #label>
                        <div @click="$router.push('/cityList')">{{cityname}}</div>
                    </template>
                    <template #action>
                        <van-icon name="map-marked" @click="$router.push('/map')"/>
                    </template>
                    </van-search>
            </div>
        </div>
       <van-grid :border="false" :clickable="true">
        <van-grid-item class="item">
            <i class="iconfont icon-zhengzu"></i>
            <p>整租</p>
        </van-grid-item>
        <van-grid-item class="item">
            <i class="iconfont icon-yunxuhezu"></i>
            <p>合租</p>
        </van-grid-item>
        <van-grid-item class="item">
            <i class="iconfont icon-dituzhaofang"></i>
            <p>地图找房</p>
        </van-grid-item>
        <van-grid-item class="item">
            <i class="iconfont icon-zufangyuechifangzixianxing"></i>
            <p>去出租</p>
        </van-grid-item>
        </van-grid>
        <div class="rent-house-group">
            <div class="group-title">
                <span>租房小组</span>
                <span>更多</span>
            </div>
            <van-grid :gutter="10" column-num="2" :clickable="true" direction="horizontal">
                <van-grid-item v-for="v in groupList" :key="v.id" >
                <div class="groupList-item">
                    <div class="img">
                        <img v-lazy="v.imgSrc" alt="">
                    </div>
                    <div class="group-item-text">
                        <h3>{{v.title}}</h3><p>{{v.desc}}</p>
                    </div>
                </div>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="information">
            <h3 class="info-title">最新咨询</h3>
            <div class="information-item" v-for="v in newList" :key="v.id">
                <div class="imgwrapper">
                    <img v-lazy="v.imgSrc" alt="">
                </div>
                <div class="information-item-content">
                    <h3>{{v.title}}</h3>
                    <div class="information-item-content-bottom">
                        <span>{{v.from}}</span><span>{{v.date}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data(){
        return{
            swipeImgArr:[],
            groupList:[],
            newList:[],
            searchVal:"",
        }
    },
    created(){   
        this.getSwiper();
        this.getgroup();
        this.getInfomation();
    },
    computed:{
        ...mapState('city',['cityname'])
    },
    methods:{
        onSearch(){},
        onCancel(){},
        async getSwiper(){
            const {data} = await this.$http.getSwiperImg()
            console.log(data);
            if(data.status!=200) return ;
            this.swipeImgArr = data.body.map(item=>{
                return{
                    ...item,
                    imgSrc:"http://47.102.145.189:8009"+item.imgSrc
                }
            })
        },
        async getgroup(){
            const {data} = await this.$http.getgroup();
            this.groupList = data.body.map(item=>{
                return{
                    ...item,
                    imgSrc:'http://47.102.145.189:8009'+item.imgSrc
                }
            })
        },
        async getInfomation(){
            const {data} = await this.$http.getnews();
            this.newList = data.body.map(item=>{
                return{
                    ...item,
                    imgSrc:'http://47.102.145.189:8009'+item.imgSrc
                }
            })
        }
    }
}
</script>

<style lang="less">
.homes-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: auto;
    background: #F6F5F6;
    flex-direction: column;
    .swiper{
        position: relative;
        .searchBar{
            width: 95%;
            position: absolute;
            left: 50%;
            top: 10px;
            transform: translateX(-50%);
        }
    }
    .item p {
        font-size: 12px;
        color: #646566;
    }
    .item i {
        color: rgb(39, 153, 115);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgb(238, 250, 244);
        text-align: center;
        line-height: 48px;
        font-size: 25px;
    }
    .rent-house-group{
        .group-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            //height: 25px;
            margin: 15px 0 15px 10px;
            padding: 0 5px;
            font-size: 15px;
            & span:last-child{
                color: #787d82;
                font-size: 14px;
            }
        };
        
        .groupList-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: row-reverse;
            .img{
                width: 53px;
                height: 53px;
                margin-left: 25px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .group-item-text{
                font-size: 12px;
                color: #999;
                h3{
                   font-size: 13px;
                   color: #000;
                }
            }
        }
    }
    .information{
        background: #fff;
        margin-top: 15px;
        padding: 0 15px;
        .info-title{
            margin: 10px 0 5px 10px;
            font-size: 15px;
        }
        .information-item{
            display: flex;
            height: 120px;
            padding: 15px 10px 15px 0;
            border-bottom: 1px solid #e5e5e5;
            .imgwrapper{
                height: 90px;
                width: 120px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .information-item-content{
                margin-left: 15px;
                flex: 1;
                font-size: 14px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .information-item-content-bottom{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 212px;
    background-color: #39a9ed;
    img{
        width: 100%;
    }
  }
</style>